本文共 3978 字,大约阅读时间需要 13 分钟。
用两个swiper,通过相同的current来实现联动html部分:
标题
js部分:
Page({ data: { indicatorDots: false, autoplay: false, circular: false, interval: 5000, duration: 1000, current: 0, newsList: [ { cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553791564915&di=82f97326fbe75661887d1af7fda9d568&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc331932c2426b65af464f7d33d70998e1b4f907d4e277-xAZ1WC_fw658'}, { cover_img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553792367072&di=802a2f24ef6758ec18ae7cbf73090889&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F15%2F20180815175029_gwreg.jpg'}, { cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554387191&di=edd137ed04e730249baed20be1fd0b6b&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F08%2F20170808180405_XjuVx.thumb.700_0.jpeg'}, { cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553792634916&di=e3f02dbd42e36313181882988ad61754&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F01%2F20180701171229_4vdmG.jpeg'}, { cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553792761227&di=1510f0c987e6e79029f8fa8b9a7cc26a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F23%2F20171023093859_Cz4ij.png'}, ], bgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553791564915&di=82f97326fbe75661887d1af7fda9d568&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc331932c2426b65af464f7d33d70998e1b4f907d4e277-xAZ1WC_fw658' }, // 大图滑动 intervalChange(e) { this.setData({ current: e.detail.current }) //改变背景图 let src = this.data.newsList[e.detail.current].cover_img this.setData({ bgSrc: src }) }, // 小图滑动 dotsChange(e){ this.setData({ current: e.detail.current }) //改变背景图 let src = this.data.newsList[e.detail.current].cover_img this.setData({ bgSrc: src }) }, // 点击小图 changeIndex(e){ this.setData({ current: e.currentTarget.dataset.index }) //改变背景图 let src = this.data.newsList[e.currentTarget.dataset.index].cover_img this.setData({ bgSrc: src }) }})
css部分:
/* component/index/knowledge.wxss */.page{ height: 100%;}.diaries{ height: 100%;}.swiper-news{ height: 822rpx; margin-top: 32rpx}.new-item{ height: 100%; display:flex; flex-direction: column; align-items:center;}.bg-img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: blur(50rpx);}.slide-image{ width: 468rpx; height: 556rpx; border-radius: 20rpx; margin-bottom: 26rpx; box-shadow:0rpx 40rpx 50rpx -40rpx #3f3e3e; position:absolute; top:-142rpx;}.other-image{ width: 468rpx; height: 516rpx; border-radius: 20rpx;}.bg-msg{ width: 540rpx; height: 640rpx; background-color: white; border-radius: 20rpx; display: flex; justify-content: center; box-shadow:0rpx 40rpx 50rpx -40rpx #3f3e3e; position:absolute; bottom:32rpx; padding: 0 34rpx; padding-top:446rpx; box-sizing:border-box;}.bg-unmsg{ width: 540rpx; height: 659rpx; border-radius: 20rpx; display: flex; justify-content: center; position:absolute; bottom:0;}.swiper-dots{ margin-top: 8rpx;}.dot-item{ display: flex; flex-direction: column; align-items: center; margin-left:280rpx;}.dot-image{ width: 118rpx; height: 154rpx; border-radius: 10rpx;}.line{ width: 50rpx; height: 8rpx; background-color: white; border-radius: 8rpx; margin-top: 24rpx;}
转载地址:http://ezrgn.baihongyu.com/